<template>
  <div class="container">
    <div class="logo">
      <van-image
        width="15rem"
        height="10rem"
        fit="contain"
        src="/static/images/logo.png"
      />
    </div>
    <div class="form">
      <van-cell-group>
        <van-field
          :value="user.phone"
          @change="e => user.phone = e.mp.detail"
          required
          clearable
          label="手机号"
          placeholder="请输入手机号"
          bind:click-icon="onClickIcon"
        />

        <van-field
          :value="user.password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
          @change="e => user.password = e.mp.detail"
        />
        <div class="button">
          <van-button square plain type="info" custom-style="width:50%" @click="register">注册</van-button>
          <van-button square type="primary" custom-style="width:50%" @click="login">登录</van-button>
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
  import request from '../../utils/request'

  export default {
    data() {
      return {
        user:{}
      }
    },

    methods: {
      register() {
        wx.navigateTo({
          url: '/pages/register/main'
        })
      },

      async login(){
         let response = await request({
          url: `/user_service/login/${this.user.phone}/${this.user.password}`,
          method: 'GET'
        });

        if (response.success === false){
          wx.showToast({
            title: '登录失败',
            icon: 'loading'
          });
        }else {
          wx.setStorageSync("id", response.data.id);
          wx.switchTab({
            url: '/pages/index/main'
          })
        }
      }
    }
  }
</script>

<style>
.logo {
  text-align: center;
}
.container {
  position: relative;
  height: 100%;
}
.button {
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 100%;
}
</style>
